<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>首页</title>
    <link rel="shortcut icon" href="logo.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>柱状图</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
        <th:block th:include="include :: echarts-js" />
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script type="text/javascript">

	    $('#pay-qrcode').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', 'auto'],
	            content: html
	        });
	    });
        $.ajax({
            type: "post",
            url:  "/lvyou/spot/tongji",
            data: {
            },
            success: function(r) {
                var spotname = [];
            var   spot=r.data;
            var visitCount = [];
            var likeCount = [];
            var spotName = [];
                for (let i = 0; i < spot.length; i++) {
                    spotName.push(spot[i].name);
                    visitCount.push(spot[i].visitCount);
                    likeCount.push(spot[i].likeCount);

                }
                var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
                var baroption = {
                    title : {
                        text: '景区浏览量和订票量统计'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['浏览量','订票量']
                    },
                    grid:{
                        x:30,
                        x2:40,
                        y2:24
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : spotName
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'浏览量',
                            type:'bar',
                            data:visitCount,
                        },
                        {
                            name:'订票量',
                            type:'bar',
                            data:likeCount,
                        }
                    ]
                };
                barChart.setOption(baroption);
                window.onresize = barChart.resize;
            }
        });


    </script>
</body>
</html>
